<template>
  <div>
    <form @submit.prevent="login">
      <input type="text" v-model="account" placeholder="账号" maxlength='16' class='account'>
      <input  type="password" v-model="pwd" placeholder="密码" maxlength='16' class='pwd'>
      <input type="submit" class='submit' value='登录'>
    </form>
    <AlterTip @closeTip='closeTip' :alertText='alertText' v-show='showAlert'></AlterTip>
  </div>
</template>

<script>

  import AlterTip from '../alertTip/AlertTip.vue';
  
  export default {
    data(){
      return {
        account:'',
        pwd:'',
        alertText: '',
        showAlert: false
      }
    },
    components: {
      AlterTip
    },
    methods: {
      login(){
        const {account,pwd} = this
        if(!account){
          this.showAlert = true
          this.alertText = '账号不能为空'
        }else if(!pwd){
          this.showAlert = true
          this.alertText = '密码不能为肯空'
          return
        }
        if(account != 'admin'){
          this.showAlert = true
          this.alertText = '账号密码错误'
        }else if (pwd != 123){
          this.showAlert = true
          this.alertText = '密码错误'
          return
        }

        this.$store.commit('getuserInfo','admin')
        this.$emit('closeLogin')

        },
      closeTip(){
        this.showAlert = false
        this.alertText = ''

      }

      }

  }
</script>

<style scoped>
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
form .account,form .pwd {
  width: 60%;
  height: 30px;
  margin-top: 15px;
  border: none;
  outline: none;
  border-bottom: 2px solid #397;
}
.submit {
  width:80px;
  height: 25px;
  border-radius: 5px;
  border: none;
  outline: none;
  margin-top: 20px;
  background: #397;
  color: #eee;
}
.submit:hover {
  color: #fff;
  cursor: pointer;
}
</style>
